<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view :class="item.colorClass" class="swiper-item">
						<image class="image" :src="item.url" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="card1">
				<view class="left-icon">
					<image src="../../static/鱼.png" style="width: 30px; height: 30px;"></image>
				</view>
				<view class="center-text " style="margin-left: 10px;">
					<p style="font-size: 12px;">欢迎光临</p>
					<h5 style="font-size: 8px; color: gray;">在这里遇见美味生活</h5>
				</view>
				<view class="right-button">
					<button @click="redirectToLogin" style="width: 60px; height: 20px; background: #ff0000;">
						<h5 style="font-size: 8px; color: #fffefe; ">加入会员</h5>
					</button>
				</view>
			</view>
			<view class="card2">
				<div class="left-side" @click="redirectTomenuPage">
					<div style="padding-top: 10px;">
						<h1 style="text-align: center;">点餐</h1>
						<h1 style="font-size: 10px; color: #ff2e6d; text-align: center; margin-top: 0px;">在线点，到店取</h1>
						<image src="../../static/购物.png" style="width: 100px; height: 100px;"></image>
					</div>
				</div>
				<div class="right-side">
					<div style="padding-top: 10px; " @click="redirectToLogin">
						<h1 style="text-align: center;">会员充值</h1>
						<h1 style="font-size: 10px; color: #ff2e6d; text-align: center; margin-top: 0px;">充值更优惠</h1>
						<image src="../../static/购物.png" style="width: 100px; height: 100px;"></image>
					</div>
				</div>
			</view>
	<u-popup v-model="show" :round="10" mode="center" >
		<view>
			<u-button type="primary" @click="touristlogin">
			 是否选择游客登录
			</u-button>
		</view>
	</u-popup>
			<u-popup v-model="dialogVisible" position="bottom" :z-index="1000" mode="bottom" close-icon-pos="top-right"
				border-radius="14" closeable="true">
				<scroll-view class="dialog-content" scroll-y style="max-height: 300px;">
					<view class="table-item" v-for="table in tableData" :key="table.tableId" @click="selectTable(table)"
						:class="{ selected: table.tableId === selectedTable.tableId }">
						<text>{{ table.tableId }}号餐桌</text>
						<!-- 					<text>{{ table.peopleNumber }}人</text> -->
						<text v-if="selectedTable === table">已选</text>
					</view>
				</scroll-view>
				<u-button type="primary" @click="confirmTableSelection">
					{{ selectedTable ? '选择' + selectedTable.tableId + '号餐桌' : '确定' }}
				</u-button>
			</u-popup>
			<view class="uni-margin-wrap2">
				<u-swiper :list="list3" indicator indicatorMode="line" circular :interval="interval"
					:duration="duration">
				</u-swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		requst_get_tableInfo,
		requst_get_customerInfo
	} from '@/api/menu.js'
		import { requst_post_login,
		requst_post_Visitorlogin} from '@/api/menu.js'
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2500,
				duration: 500,
				dialogVisible: false,
				selectedTable: null,
				show: false,
				tableData: [],
				data: {},
				list3: [
					'https://st-gdx.dancf.com/gaodingx/0/uxms/design/20200310-202156-d9a1.png?x-oss-process=image/resize,w_1125/interlace,1,image/format,jpg',
					'https://img.zcool.cn/community/01b79e55448ded0000019ae9e34d88.jpg@1280w_1l_2o_100sh.jpg',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://st-gdx.dancf.com/gaodingx/0/uxms/design/20200310-202156-d9a1.png?x-oss-process=image/resize,w_1125/interlace,1,image/format,jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://www.bing.com/images/blob?bcid=rxNIQEt7wkYGyg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
			}
		},
		methods: {
			redirectToLogin() {
				uni.navigateTo({
					url: '/pages/login/login' // 替换为你的登录页面路径
				});
			},
			selectTable(table) {
				// 用户选择餐桌时触发的方法
				this.selectedTable = table;
			},
			confirmTableSelection() {
				if (this.selectedTable) {
					this.dialogVisible = false;
					uni.setStorageSync('selectedTable', this.selectedTable)
					// 在这里添加跳转到点餐页面的逻辑
					uni.navigateTo({
						url: '/pages/menu/menu' // 替换为你的登录页面路径
					});
				} else {
					// 未选择餐桌
					uni.showToast({
						title: '请选择一个餐桌',
						icon: 'none',
					});
				}
			},
			touristlogin(){
				requst_post_Visitorlogin(null).then(resVisitor =>{
					if(resVisitor.data.code = 200){
						this.data.username = resVisitor.data.data.username
						this.data.password = "123456"
						requst_post_login(this.data).then(res=>{
						  res = res.data;
						  if(res.code == 200){
							  this.show = false
						    wx.setStorage({
						      key: 'X-Token',
						      data: res.data.token,
						    })
							requst_get_customerInfo(res.data.token).then(rescustomer=>{
									if (rescustomer.data.code === 200) {
										uni.setStorageSync('userInfo', rescustomer.data.data)
									}
								}).catch(err=>{
							  console.log('requst_get_customerInfo',err)
							})
						    wx.showToast({
						      title: '登录成功',
						      icon: 'success',
						    })
						  }
						}).catch(err=>{
						  console.log('ajax_err',err)
						})
					}
				})
			},
			redirectTomenuPage() {
				if(uni.getStorageSync("X-Token"))
				{
					requst_get_tableInfo(null).then(res => {
						res = res.data;
						if(res.code == 200){
							this.tableData = res.data.rows;
							this.dialogVisible = true;
							}
					});
				}
				else{
					this.show = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-margin-wrap {
		width: 100%;
		height: 150px;
	}

	.selected {
		background-color: #757570;
		/* 用于示例，你可以设置为你喜欢的颜色 */
		color: red;
		/* 文本颜色示例 */
	}


	.table-item {
		/* 其他表格项的样式，这里设置了基本样式 */
		padding: 10px;
		border: 1px solid #ccc;
		margin-bottom: 5px;
		/* 添加其他表格项样式属性 */
	}

	.uni-margin-wrap2 {
		position: absolute;
		top: 700rpx;
		height: 100px;
		width: 90%;
		margin-left: 5%;
		z-index: -1;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper2 {
		width: 100%;
		height: 100%;
		text-align: center;
		border-radius: 30px;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		width: 100%;
		text-align: center;
		position: relative;
	}

	image {
		width: 100%;
		height: 326rpx;
		display: inline-block;
		box-sizing: content-box
	}

	.card1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		top: 250rpx;
		/* 顶部对齐 */
		width: 90%;
		margin-left: 5%;
		height: 100rpx;
		/* 设置上半部分的高度 */
		background: white;
		border-radius: 10rpx;
		box-shadow: 5px 5px 5px #cdcfcf;
		z-index: 1;
		/* 设置一个比默认层叠顺序更高的值 */
	}

	.card2 {
		position: absolute;
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: space-between;
		top: 375rpx;
		width: 90%;
		margin-left: 5%;
		height: 300rpx;
		/* 设置 card2 的高度 */
		background: white;
		border-radius: 10rpx;
		box-shadow: 5px 5px 5px #cdcfcf;
	}

	.left-side,
	.right-side {
		flex: 1;
		/* 让左侧和右侧内容占据相同的空间 */
		margin: 0 20px;
		/* 调整左右边距 */
	}

	.left-icon {
		width: 30px;
		/* 调整图标部分的宽度 */
		height: 30px;
		/* 调整图标部分的高度 */
		border-radius: 50%;
		/* 创建圆圈效果 */
		/* 		background: #FF0000; */
		/* 设置圆圈的背景颜色 */
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 5%;
		font-size: 15px;
		/* 调整图标的大小 */
		color: #fff;
		/* 图标的颜色 */
	}

	.center-text {
		flex: 1;
		/* 占据剩余空间 */
		font-size: 18px;
	}

	.right-button {
		width: 60px;
		/* 调整按钮部分的宽度 */
		height: 20px;
		/* 调整按钮部分的高度 */
		background: #00FF00;
		/* 设置按钮的背景颜色 */
		border-radius: 15px;
		/* 创建椭圆按钮效果 */
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 5%;
		font-size: 14px;
		/* 调整按钮文字的大小 */
		color: #fff;
		/* 按钮文字的颜色 */
	}

	.uni-bg-red {
		background-color: red;
	}

	.uni-bg-green {
		background-color: green;
	}

	.uni-bg-blue {
		background-color: blue;
	}

	.section-1 {
		position: relative;
		background-color: $bg-color-white;
		margin-top: -60rpx;
		border-radius: $border-radius-lg;
		padding: 60rpx 0;
		display: flex;
		margin-bottom: 30rpx;
		box-shadow: $box-shadow;

		.item {
			flex: 1;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			&:nth-child(1):after {
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				width: 2rpx;
				background-color: $border-color;
			}

			image {
				width: 100rpx;
				margin-bottom: 20rpx;
			}

			.wenyue-font {
				font-size: 48rpx;
				margin-bottom: 10rpx;
			}
		}
	}
</style>